(function () {
  // 步骤3：创建echarts实例
  let myChart = echarts.init(document.querySelector(".box3"));
  console.log(myChart);

  // 步骤4：定义配置（指定图表的配置项和数据）

  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    // legend: {
    //   right: "15%",
    //   top: "95%",
    //   data: ["Video Ads", "Direct", "Search Engine"],
    // },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
        show: true,
      },
      axisTick: { show: false },
      splitLine: { show: false },
    },
    // xAxis: [
    //   {
    //     type: "category",
    //     boundaryGap: false,
    //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //   },
    // ],
    yAxis: {
      splitLine: {
        lineStyle: {
          //   color: white,
          type: "value",
        },
      },

      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
        show: true,
      },
      axisTick: { show: false },
      splitLine: { show: false },
      scale: true,
    },

    series: [
      {
        name: "Video Ads",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [350, 232, 501, 154, 190, 530, 410],
      },
      {
        name: "Direct",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [620, 832, 401, 834, 590, 830, 320],
      },
      {
        name: "Search Engine",
        type: "line",
        stack: "Total",
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  };

  // 步骤5：使用刚指定的配置项和数据显示图表
  myChart.setOption(option);

  //   window.onresize = function () {
  //     myChart.resize();
  //   };
})();
